<template>
    <div>
<!--          面包屑-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item >🏠</el-breadcrumb-item>
            <el-breadcrumb-item>用户审核</el-breadcrumb-item>
        </el-breadcrumb>
<!--        卡片区域-->
        <el-card class="box-card">
<!--            <el-row :gutter="20">-->
<!--                <el-col :span="3">-->
<!--                    <el-radio v-model="radio" label="0">未审核</el-radio>-->
<!--                </el-col>-->
<!--                <el-col :span="3">-->
<!--                    <el-radio v-model="radio" label="1">审核通过</el-radio>-->
<!--                </el-col>-->
<!--                <el-col :span="3">-->
<!--                    <el-radio v-model="radio" label="2">审核未通过</el-radio>-->
<!--                </el-col>-->

<!--            </el-row>-->
            <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="120px">
                <el-form-item label="" prop="status" >
                    <el-radio-group v-model="queryParams.status" >
                        <el-radio :label="0" >未审核</el-radio>
                        <el-radio :label="1" >审核通过</el-radio>
                        <el-radio :label="2" >审核未通过</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item  style='position: absolute;right:10px;'>
                    <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetForm('queryForm')">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table
                    :data="userlist"
                    stripe
                    align="center"
                    :row-class-name="tableRowClassName"
            >
                <el-table-column
                        label="#"
                        type="index">
                </el-table-column>
                <el-table-column
                        prop="account"
                        label="用户名"
                        align="center" >
                </el-table-column>
                <el-table-column
                        prop="email"
                        label="邮箱"
                        align="center" >
                </el-table-column>
                <el-table-column
                        prop="role"
                        label="用户角色"
                        align="center" >
                </el-table-column>
                <el-table-column
                        prop="avatar"
                        label="角色凭证"
                        align="center" >
                    <template slot-scope="scope">
                        <el-button type="primary" @click="pingzheng(scope.row.proof)">
                            点击打开文件
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="审核状态"
                        align="center" >
                    <template slot-scope="scope">
                        <el-button
                                @click="shenghe(scope.row.id,scope.row.email,scope.row.username,scope.row.status,scope.row.role,scope.row.proof,scope.row.account)"
                                :class="[{'primary':scope.row.status==0},
                        {'success':scope.row.status==1},
                        {'red':scope.row.status==2}]"
                                :disabled="scope.row.status==0?false:true"
                        >
                            {{scope.row.statusDetail}}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--     分页     -->
            <el-pagination
                    v-show="total>0"
                    :page-size="queryParams.pageSize"
                    :pager-count="11"
                    :current-page.sync="queryParams.pageNum"
                    :total="total"
                    @current-change="getuserlist"
            >
            </el-pagination>

        </el-card>
<!--        用户凭证对话框-->
        <el-dialog
                title="用户凭证"
                :visible.sync="Visible"
                width="40%"
        >
            <div class="tutu">
                <img :src="tupiang">
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="success" @click="Visible=false">确认</el-button>
  </span>
        </el-dialog>
<!--        审核操作对话框-->
        <el-dialog
                title="审核操作"
                :visible.sync="Visible2"
                width="40%"
        >
            <el-row>
                该用户昵称:{{shenhemz}}
            </el-row>
            <el-row>
                该用户id:{{shenheid}}
            </el-row>
            <el-row>
                该用户期望身份:{{shenherole}}
            </el-row>
            <div class="tutu">
                <img :src="shenheavater">
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="success" @click="shenghecaozuo1">通过该审核</el-button>
                <el-button  type="danger" @click="shenghecaozuo2">拒绝该审核</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "shenhe",
        data() {
            return {
                // 用户数据列表
                userlist: [],
                // 用户查询数据列表
                // filusers: [],
                radio:'',
                Visible:false,
                tupiang:'',
                Visible2:false,
                shenhezhuangtai:0,
                shenherole:'',
                shenheavater:'',
                shenheaccount:'',
                shenheid:0,
                shenheemail:'',
                shenhemz:'',
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    status: null,
                },
                total: 0,
            }
        },

        created() {
            this.getuserlist(),
                this.tableRowClassName(this.userlist)
        },
        watch:{
            radio:{
                handler(val){
                    this.ridiofunc(val)
                }
            }
        },
        methods: {
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getuserlist();
            },
            async getuserlist() {
                const token = sessionStorage.getItem("token");
                this.$http.defaults.headers.common['Authorization'] = token;
                if(this.queryParams.status != null){
                    const {data: res} = await this.$http.get("/manager/selectUnAuthorizedUser?pageNum="+this.queryParams.pageNum+'&'+"pageSize="+this.queryParams.pageSize+'&'+"status="+this.queryParams.status)
                    this.userlist = res.data.data
                    this.total = res.data.total
                }else {
                    const {data: res} = await this.$http.get("/manager/selectUnAuthorizedUser?pageNum="+this.queryParams.pageNum+'&'+"pageSize="+this.queryParams.pageSize)
                    this.userlist = res.data.data
                    this.total = res.data.total
                }
            },
            tableRowClassName({rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            ridiofunc(val){
                if(val=='0'){
                    this.filusers = this.userlist.filter((p) => {
                        return p.status == '0'
                    })
                }
                if(val=='1'){
                    this.filusers = this.userlist.filter((p) => {
                        return p.status == '1'
                    })
                }
                if(val=='2'){
                    this.filusers = this.userlist.filter((p) => {
                        return p.status == '2'
                    })
                }
            },
            clear(){
                this.queryParams.status = null,
                this.
                this.radio='',
                this.filusers=this.userlist
            },
            resetForm() {
                this.queryParams = {
                    pageNum: 1,
                    pageSize: 10,
                    status: null,
                },
                this.handleQuery();
            },
            pingzheng(p){
                this.Visible=true
                this.tupiang=p
            },
            shenghe(id,email,username,status,role,avatar,account){
                this.shenheid=id
                this.shenheemail=email
                this.shenhemz=username
                this.shenhezhuangtai=status
                this.shenherole=role
                this.shenheavater=avatar
                this.shenheaccount=account
                this.Visible2=true
            },
           async shenghecaozuo1(){
                const token = sessionStorage.getItem("token");
                this.$http.defaults.headers.common['Authorization'] = token;
                await this.$http.post("manager/updateStatus?id="+this.shenheid+'&'+
                "account="+this.shenheaccount+
                '&'+"email="+this.shenheemail+
                '&'+"username="+encodeURIComponent(this.shenhemz)+'&'+"status=1"
                )
               this.getuserlist()
               this.Visible2=false
            },
            async shenghecaozuo2(){
                const token = sessionStorage.getItem("token");
                this.$http.defaults.headers.common['Authorization'] = token;
                await this.$http.post("manager/updateStatus?id="+this.shenheid+'&'+
                    "account="+this.shenheaccount+
                    '&'+"email="+this.shenheemail+
                    '&'+"username="+encodeURIComponent(this.shenhemz)+'&'+"status=2"
                )
                this.getuserlist()
                this.Visible2=false
            }
        }
    }
</script>

<style scoped>
    .el-breadcrumb{
        margin-bottom: 12px;

    }
    .el-card{
        box-shadow: 0 1px 1px rgba(0,0,0,0.15);
    }
    .primary{
        background-color: #409EFF;
    }
    .success{
        background-color: #67C23A;
    }
    .red{
        background-color: #F56C6C;
    }
    .tutu{
        padding-left: 80px;
        width: 350px;
        height: 350px;
    }
    .tutu img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }

</style>
